<template>
	<view v-if="info.name" :style="theme">
		<view class="content" :style="{backgroundImage: 'url(' + imgHost + '/bg_huodong.png)'}">
			<view class="card" :style="{backgroundImage: 'url(' + imgHost + '/card_miaoshao.png)'}">
				<view class="f30 c2 fw5">
					{{info.name}}
				</view>
				<view class="f26 c6 mt10">
					秒杀开始时间：{{info.startTime}}
				</view>
				<view class="xian"></view>
				<image :src="info.businessImg" mode="widthFix" class="banner"></image>
				<view class="f34 c2 fw5 mt40">
					{{info.businessName}}
				</view>
				<view class="price">
					<text>秒杀价</text>
					<text>¥</text>
					<text>{{info.discountPrice}}</text>
					<text>原价¥{{info.businessOriginPrice}}</text>
				</view>
				<view class="qgBtn f32 cf" @click="tzBtn">
					立即抢购
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				noClick: true,
				info: {},
				id: '',
			}
		},
		onLoad(ops) {
			console.log(777,ops)
			if(!ops.id && ops.scene) {
				this.id = decodeURIComponent(ops.scene)
			} else {
				this.id = ops.id
			}
		},
		onShow() {
			setTimeout(()=> {
				this.getDetail()
			}, 300)
		},
		methods: {
			jump(url, params, a) {
				this.$app.jump(url, params, a);
			},
			jump2(url, params, a) {
				this.$app.jump2(url, params, a);
			},
			tzBtn() {
				let e = {...this.info}
				if(e.businessType == '04') {
					this.jump('/pages/setmeal/detail?id=',e.businessId)
				} else if(e.businessType == '07') {
					this.jump('/pages/curriculum/detail?id=', e.businessId)
				} else if(e.businessType == '19') {
					this.jump('/subPackages/special/details?id=',e.businessId)
				}
			},
			getDetail() {
				this.$app.ajax({
					api: this.$api.secKillPosterJump(),
					data: {
						userId: this.userInfo.id,
						param: {
							id: this.id,
						}
					}
				}).then((res) => {
					if (res.errorCode === '000000') {
						this.info = res.record
						if(res.record.venueId) {
							this.$store.commit('setVenueName', res.record.venueName);
							this.$store.commit('setVenueId', res.record.venueId);
						}
					}
				}).catch(() => {})
			}
		}

	}
</script>


<style scoped lang="scss">
	.content {
		width: 100%;
		height: 100vh;
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
		overflow-y: auto;
		box-sizing: border-box;
		padding-top: 100rpx;
	}

	.card {
		width: 690rpx;
		margin: 0 auto;
		height: 1016rpx;
		background-position: center center;
		background-repeat: no-repeat;
		box-sizing: border-box;
		background-size: cover;
		overflow-y: auto;
		padding: 108rpx 30rpx 0;
		position: relative;
	}

	.xian {
		border-top: 1px dashed #DDDDDD;
		margin: 38rpx auto;
		width: 100%;
	}

	.banner {
		border-radius: 20rpx;
		width: 100%;
	}

	.price {
		line-height: 50rpx;
		margin-top: 20rpx;
		color: #FE2C2E;
		text {
			display: inline-block;
			font-size: 26rpx;

			&:nth-of-type(2) {
				margin-left: 4rpx;
			}

			&:nth-of-type(3) {
				font-size: 48rpx;
				font-weight: bolder;
			}

			&:nth-of-type(4) {
				margin-left: 8rpx;
				text-decoration: line-through;
				color: #999999;
			}
		}
	}
	.qgBtn {
		width: 630rpx;
		line-height: 88rpx;
		height: 88rpx;
		background: linear-gradient(270deg, #FE2CC9 0%, #FE2C2E 100%);
		box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(247,0,109,0.18);
		border-radius: 50rpx;
		text-align: center;
		position: absolute;
		left: 30rpx;
		bottom: 60rpx;
	}
</style>